<template>
  <div class="flex-col space-y-25 component-HsohQA50">
    <div class="flex-row group_3 space-x-19">
      <div class="flex-col shrink-0 group_4 space-y-6 width90">
        <span class="text_5">请先完成授权再推送!</span>
        <span class="font_1 text_7">
          1.复制链接
          <br />
          2.打开微信将链接发送至微信传输助手
          <br />
          3.打开链接直至登录成功
          <br />
          注：此链接有效期为 5 分钟
        </span>
      </div>
      <span class="shrink-0 self-start font_1 text_6" @click="closeAI">X</span>
    </div>
    <div class="flex-col space-y-23">
      <div class="flex-col justify-start items-center text-wrapper width98 ">
        <div class="font_1 text_10 text_ellipsis " style="margin-left:10px;width:95%" id="copycode">{{targetUrl}}</div>
      </div>
      <div class="flex-col justify-start items-center self-center button">
        <span class="font_2 text_12" @click="copyText">点击复制</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['targetUrl'],
  components: {},
  data() {
    return {
      invitationCode:'s.rbook.vip****41a2ad162c630d'
    };
  },
  methods: {
    copyText() {
      const range = document.createRange(); //创建range对象
      range.selectNode(document.getElementById('copycode')); //获取复制内容的 id 选择器
      const selection = window.getSelection();  //创建 selection对象
      if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
      selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
      document.execCommand('copy'); //复制选中的文字到剪贴板
      this.$toast.success('复制成功');
    },
    closeAI(){
      this.$emit('closeAI');
    }
  }
}
</script>

<style scoped lang="css">
.text_ellipsis{
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}
.width98 {
  width: 98% !important;
}
.width90{
  width: 90% !important;
}

.component-HsohQA50 {
  padding: 0.75rem 0.5rem 0.5rem;
  background-color: #ffffff;
  border-radius: 1.88rem;
}

.font_1 {
  font-size: 0.88rem;
  font-family: 'PingFang SC';
  line-height: 1.25rem;
  font-weight: 600;
  color: #fefeff;
}

.font_2 {
  font-size: 1rem;
  font-family: 'PingFang SC';
  line-height: 1.38rem;
  font-weight: 600;
}

.space-y-25>*:not(:first-child) {
  margin-top: 1.56rem;
}

.group_3 {
  padding-left: 1.25rem;
  padding-right: 0.56rem;
}

.space-x-19>*:not(:first-child) {
  margin-left: 1.19rem;
}

.group_4 {
  width: 14.81rem;
}

.space-y-6>*:not(:first-child) {
  margin-top: 0.38rem;
}

.text_5 {
  color: #000002;
  font-size: 1.5rem;
  font-family: 'PingFang SC';
  font-weight: 600;
  line-height: 2.06rem;
}

.text_7 {
  color: #060518bd;
  line-height: 1.5rem;
  text-align: left;
}

.text_6 {
  color: #706f7a;
}

.space-y-23>*:not(:first-child) {
  margin-top: 1.44rem;
}

.text-wrapper {
  padding: 0.88rem 0;
  background-color: #f1f3f7;
  box-shadow: inset 0px 0.13rem 0.13rem 0px #2e2e2e05;
  border-radius: 1.5rem;
  width: 18.44rem;
}

.text_10 {
  color: #0605188a;
}

.button {
  padding: 0.75rem 0;
  background-color: #3f38dd;
  box-shadow: 0px 0.75rem 1.5rem 0px #2d289e33;
  border-radius: 1.5rem;
  width: 10rem;
}

.text_12 {
  color: #ffffff;
}
</style>
